<template>
  <div>
    <input type="checkbox" v-model="isCheck" @click="change"/>
    <span>已完成{{finished}}/全部{{all}}</span>
    <button v-if="isCheck" @click="clearAll">清除已完成</button>
  </div>
</template>

<script>
import {eventBus} from '../eventbus'
export default {
    name:'MyFooter',
    data(){
        return {
           isCheck: false,
           finished: 0,
           all: 0 ,
           todolist:[]
        }
    },
    created(){
      eventBus.$on('sendFooter',(param) => {
        this.todolist = param;
        let i = 0;
        this.isCheck = false
        this.todolist.forEach((item,index,arr) => {
          if(item.isCheck) {
            i++;
            this.isCheck = true
          }
          this.finished = i;
        })
        this.all = this.todolist.length
      })
    },
    methods:{
      change(){
        eventBus.$emit('selectAll',!this.isCheck)
      },
      clearAll(){
        let ids = []
        this.todolist.forEach((item,index,arr) => {
          if(item.isCheck){
            ids.push(item.id)
          }
        })
        ids.forEach((item) => {
          this.todolist.forEach((todo,index,arr) => {
            if(todo.id == item){
                arr.splice(index,1)
            }
          })
        })
      }
    }
}
</script>

<style>

</style>